<template>
   <div>
    <Title content="网易精选"></Title>
    <div class="container">
        <div class="content">

            <div class="container_list">
                <ul :class="['title_list', 'flex_top', categoryL2List.length > 5 ? 'tomiddle' : 'tostart']">
                    <li :class="['title_item', isChoose == index ? 'active' : '']"
                        @click="handlerChangeisChoose(index, item.frontName, item.id)" v-for="item, index in categoryL2List"
                        :key="item.id">{{ item.name }}
                    </li>
                </ul>
            </div>

            <div class="middle">
            </div>

            <div class="item_container">
                <div class="item_container_title">
                    <div>
                        {{ categorytop }}
                    </div>
                </div>
                <div class="item_container_list flex" >
                    <div class="item_container_item" v-for="item in bannerList" :key="item.id">
                        <img class="bigImg" :src="item.listPicUrl" @click="toGoodsDetail(item)">
                        <div class="item_title">
                            <img :src="logo.logoUrl" v-for="logo, index in item.preLogo" :key="index"
                                style="display: inline;">
                            {{ item.name }}
                        </div>
                        <div class="item_red">
                            <span>
                                <img src="https://yanxuan.nosdn.127.net/static-union/166909947513c0c8.png">
                                可用红包
                            </span>
                        </div>
                        <div class="price_old_now">
                            <span class="get_to">到手¥</span>
                            <span class="price_now">1499</span>
                            <span class="price_old">¥1999</span>
                        </div>
                        <div class="full">
                            <span>满69-20元</span>
                        </div>
                    </div>

                </div>

            </div>

        </div>

        <div class="bottom">
            <span>更多内容敬请期待</span>
        </div>
        <van-back-top right="8.625px" bottom="45px" />
    </div>
   </div>
</template>

<script setup lang="ts">
import { getCateList } from '../../api/catelist'
import type { CateListModel, CategoryL2ListModel, bannerListModel } from '../../api/catelist'
import { ref, watch, onMounted } from 'vue'
import { useRouter } from 'vue-router';
//接收参数
const router = useRouter()

// console.log(router.currentRoute.value.params)

//测试发送请求参数
const params = ref<CateListModel>({
    timestamp: Date.now(),
    categoryId: 1010000,
    subCategoryId: 109214000,
    categoryType: 0
})
//toHome
const tohomeHandler = () => {
    console.log(1)
    router.push('/home')

}
//去商品详情页
const toGoodsDetail = (item:any) => {
    router.push(`/goodsdetail/${item.id}`)
}
// const params=ref({
//     timestamp:0,
//     categoryId:0,
//     subCategoryId:0,
//     categoryType:0
// })
//导航栏列表
const categoryL2List = ref<CategoryL2ListModel[]>([])
//图片循环数据
const bannerList = ref<bannerListModel[]>([])
//导航栏下方文字
const categorytop = ref<string>('')
//导航栏高亮提示
const isChoose = ref(0)
const handlerChangeisChoose = (index: number, frontName: string, id: number) => {
    isChoose.value = index
    categorytop.value = frontName
    params.value.subCategoryId = id
    params.value.categoryType = undefined
    GetcategoryL2List()
    console.log(categorytop.value)
}
//获取本页数据信息
const GetcategoryL2List = async () => {
    try {
        let result = await getCateList(params.value)
        console.log(result)
        categoryL2List.value = result.data.data.categoryL2List
        categorytop.value = result.data.data.categoryItems.category.frontName
        bannerList.value = result.data.data.categoryItems.itemList
        console.log(bannerList.value)
    } catch (error) {
        console.log(error)
    }
}
onMounted(() => {
    if (router.currentRoute.value.params.subCategoryId) {
        params.value.categoryType = Number(router.currentRoute.value.params.categoryType)
        params.value.categoryId = Number(router.currentRoute.value.params.categoryId)
        params.value.subCategoryId = Number(router.currentRoute.value.params.subCategoryId)
    } else {
        params.value.categoryId = Number(router.currentRoute.value.params.categoryId)
    }

    // console.log(params.value)
    GetcategoryL2List()
    const big=document.getElementsByClassName('bigImg')
    console.log(big)


})



</script>

<style lang="less" scoped>
* {
    margin: 0;
    padding: 0;
}

.content {

    .container_list {
        position: fixed;
        top: 44px;
        width: 100%;
        z-index: 9999;
        background: white;
        border-bottom: 1px solid black;

        .title_list {
            position: relative;
            left: -4px;
            bottom: 0px;
            height: 30px;
            overflow-x: scroll;
            align-items: center;
            z-index: 10;


            .title_item {
                padding: 0 10px;
                flex-shrink: 0;
                white-space: nowrap;
                font-size: 14px;
            }


            &::-webkit-scrollbar {
                width: 0;
                height: 0;
                display: none;
                -webkit-overflow-scrolling: touch;
                -overflow-scrolling: touch;
            }

        }
    }

}

.tomiddle {
    justify-content: flex-start;
}

.tostart {
    justify-content: center
}

.container .container_top {
    height: 43px;
    width: 100%;
    position: relative;
    padding: 0 8 0 12px;
    border-bottom: 1px solid #999999;
    background: #eee;

    .left {
        height: 22px;
        width: 24px;
        position: absolute;
        left: 12px;
        bottom: 8px;
    }

    .top_title {
        position: relative;
        left: 0;
        bottom: -5px;
        overflow: hidden;
        text-align: center;
        font-size: 20px;
        line-height: 39px;
        font-weight: bold;
    }

    .right {
        height: 28px;
        width: 70px;
        position: absolute;
        right: 8px;
        bottom: 4px;
        justify-content: space-between;
    }
}


.container .content .item_container {
    .item_container_title {
        div {
            margin: 20px 0;
            height: 25px;
            line-height: 25px;
            font-size: 14px;
            text-align: center;
        }
    }

    .item_container_list {
        justify-content: space-around;
        border-bottom: 1px solid #999999;

        .item_container_item {
            margin-bottom: 20px;

            .bigImg {
                height: 172.5px;
                width: 172.5px;
                border-radius: 3%;
            }

            div {
                width: 172.5px;
            }

            .item_title {
                line-height: 20px;
                font-size: 15px;


                img {
                    height: 16px;
                    margin-right: 5px;
                    vertical-align: middle;
                }

                span {
                    color: #444444;
                }
            }

            .item_red {
                width: 70px;
                height: 18px;
                background: #eee;
                border-radius: 30%;
                border: 1px solid #eee;
                margin: 5px 0;

                img {
                    height: 10px;
                    width: 10px;
                }

                span {
                    display: block;
                    font-size: 12px;
                    text-align: center;
                    margin: 0 2px;
                }
            }

            .price_old_now {
                margin: 10px 0;

                .price_old {
                    color: #999999;
                    text-decoration: line-through;
                    font-size: 12px;
                }

                .price_now {
                    color: red;
                    font-size: 18px;
                    font-weight: bold;
                }

                .get_to {
                    color: red;
                    font-size: 14px;
                }
            }

            .full {
                background: red;
                height: 19px;
                width: 74.7px;
                border-radius: 24px;

                span {
                    text-align: center;
                    font-size: 12px;
                    margin: 0 auto;
                    display: block;
                }
            }
        }

        &:after {
            content: '';
            width: 172.5px;
        }
    }
}

.active {
    position: relative;
    color: red;

    &:after {
        content: '';
        position: absolute;
        left: 10px;
        right: 10px;
        bottom: -2px;
        border-top: 2px solid red;
    }
}

.flex {
    display: flex;
    flex-wrap: wrap;
}

.flex_top {
    display: flex;
    // justify-content:flex-start;
    // justify-content: center;

}

.middle {
    margin-top: 30px;
    height: 10px;
    width: 100%;
    // background: #eee;
}

.bottom {
    width: 100%;
    background: #eee;
    height: 48px;
    font-size: 14px;
    text-align: center;
    line-height: 48px;
    margin-bottom: 17px;

    span {
        color: #999999;
    }
}</style>